<template>
  <div class="wrapper">
    <div class="content">
      <Issue v-if="showPage[0] == 1" />
      <Order v-if="showPage[1] == 1" />
      <Cord v-else-if="showPage[2] == 1" />
      <Mine v-else-if="showPage[3] == 1" />
     
    </div>
    <div class="nav">
      <div class="nav-item">
        <i class="iconfont icon-dating close" :class="{ show_class: showPage[0] == 1 }" @click=" go(0)"
          style="font-size: 24px;"></i><br>
        <div class="close" :class="{ show_class: showPage[0] == 1 }">主页</div>
      </div>
      <div class="nav-item">
        <i class="iconfont icon-yuyue close" :class="{ show_class: showPage[1] == 1 }" @click=" go(1)"
          style="font-size: 24px;"></i><br>
        <div class="close" :class="{ show_class: showPage[1] == 1 }">主页</div>
      </div>
      <div class="nav-item">
        <i class="iconfont icon-dingdan close" :class="{ show_class: showPage[2] == 1 }" @click=" go(2)"
          style="font-size: 22px;"></i><br>
        <div class="close" :class="{ show_class: showPage[2] == 1 }">主页</div>
      </div>
      <div class="nav-item">
        <i class="iconfont icon-wode1 close" :class="{ show_class: showPage[3] == 1 }" @click=" go(3)"
          style="font-size: 32px;"></i><br>
        <div class="close" :class="{ show_class: showPage[3] == 1 }">主页</div>
      </div>
    </div>
  </div>
</template>

<script>
import Issue from '../tutor/Issue.vue';
import Order from '../tutor/Order.vue';
import Cord from '../tutor/Cord.vue';
import Mine from '../tutor/Mine.vue';



export default {
  name: "Test",
  components: {
    Issue,
    Order,
    Cord,
    Mine
  },
  created() {

  },
  data() {
    return {
      navList: [0, 0, 0, 0, 0],
      showPage: [1, 0, 0, 0, 0]
    };
  },
  props: {},
  methods: {
    go_page(index) {
      // 、、、页面跳转
      this.navList[index] = 1
      this.close_other_page(index)
      switch (index) {
        case 0:
          this.$router.push("/")
          break;
        case 1:
          this.$router.push("/ordert")
          break;
        case 2:
          this.$router.push("/cordt")
          break;
        case 3:
          this.$router.push("/minet")
          break;
        case 4:
          this.$router.push("/addresst")
          break;
        case 5:
          this.$router.push("/feedbackt")
          break;
        case 6:
          this.$router.push("/aboutt")
          break;
        case 7:
          this.$router.push("/reportt")
          break;
      }
    },
    close_other_page(index) {
      for (let i = 0; i < this.navList.length; i++) {
        if (i !== index) {
          this.navList[i] = 0;
        }
      }
    },
    go(index) {
      this.showPage[index] = 1;
      this.showPage.forEach((v, k) => {
        if (k != index) {
          this.showPage[k] = 0;
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;

  .content {
    width: 100vw;
    height: 100vh;
  }

  .nav {
    width: 100vw;
    height: 59px;
    border-top: 1px solid #ebeaea;
    position: fixed;
    bottom: 0;
    background-color: #ffffff;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .nav-item {


      text-align: center;

      color: rgb(0, 0, 0);

      .close {
        color: #9b9a9a;
      }

      .show_class {
        color: #ffa600;
      }

      letter-spacing: 1px;



      i {
        color: #ffffff;
      }

      div {
        text-align: center;
        font-size: 10px;
        color: #ffffff;
        height: 14px;
        line-height: 14px;
      }
    }
  }

}
</style>